<template>
	<view class="page-flashSale page">
		<view class="b-header">
			<pageHeader title="活动报名" :showBack="from=='index'"></pageHeader>
			<tab :datas="tab" @tabClick="tabClick"></tab>
		</view>
		<view class="b-content p-30 p-t-50" v-show="type == 1">
			<view class="bs  p-30">
				<view class="fz30 c-72 mb-50"></view>
				<view class="form-item">
					<view class="label fz30">预约时间：</view>
					<view class="content input">
						<!-- <input type="date" value="" placeholder="请输入预约时间" /> -->
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						   <view class="uni-input">{{date}}</view>
						</picker>
					</view>
				</view>
				<view class="form-item">
					<view class="label fz30">预约活动</view>
					<view class="content input">
						<input v-model="info.title" type="text" value="" placeholder="" />
					</view>
				</view>
				<view class="form-item">
					<view class="label">预约人</view>
					<view class="content input">
						<input v-model="signData.true_name"  type="text" value="" placeholder="请输入预约人" />
					</view>
				</view>
				<view class="form-item">
					<view class="label">手机号码</view>
					<view class="content input">
						<input v-model="signData.mobile"  type="text" value="" placeholder="请输入手机号码" />
					</view>
				</view>
				<view class="form-item" style="border:none;">
					<view class="label">备注</view>
					<view class="content">
						<textarea v-model="signData.desc" type="text" value="" placeholder="请输入备注" />
					</view>
				</view>
				
				<view class="pro-footer">
					<view class="btn btn-add" @click="submit()">确定预约</view>
				</view>
			</view>
		</view>
		
		<view class="b-content p-30 p-t-50"  v-show="type == 2">
			<view class="p-l-30 p-r-30 p-t-20">
				
				<view class="flash-sale-item df mb-40">
					
					<view class="product pr">
						<view class="fz24">{{info.title}}</view>
						<view class="">
							<view class="c-ae fz18">{{info.date_activity_start}} - {{info.date_activity_end}} </view>
							<view class="c-ae fz18">{{info.address}}</view>
							<!-- <view class="df fz24">
								<view class="c-333 fw-b mr-10">￥65</view>
								<view class="c-ae" style="text-decoration: line-through;">	￥550.00
								</view>
							</view> -->
						</view>
					</view>
					<image :src="info.thumb" mode="" class="pro-img"></image>
				</view>
				
				<view class="p-l-0 p-r-30 p-t-30">
					<view class="block-title fsb df-ac">
						<view class="df-ac">
							<view class="fz30 fw-b">活动介绍</view>
						</view>
					</view>
				</view>
				<view class="flash-sale-item df mb-40" style="margin-top: 30px;">
					<view class="product ">
						<view class="fz24">开始时间：{{info.date_activity_start}}</view>
						<view class="fz24">结束时间：{{info.date_activity_end}}</view>
					</view>
				</view>
				
				<view class="p-l-0 p-r-30 p-t-30">
					<view class="block-title fsb df-ac">
						<view class="df-ac">
							<view class="fz30 fw-b">报名信息</view>
						</view>
					</view>
				</view>
				<view class="flash-sale-item df mb-40" style="margin-top: 30px;">
					<view class="product ">
						<view class="fz24">预约人：{{signData.true_name}}</view>
						<view class="fz24">手机号码：{{signData.mobile}}</view>
					</view>
				</view>
				
			</view>
			
		</view>
		<pageFooter v-if="!from"></pageFooter>
	</view>
</template>

<script>
	import tab from '../../components/tab.vue'
	import flashSaleItem from '../../components/flashSaleItem.vue'
	export default {
		components: {
			tab,
			flashSaleItem
		},
		
		data() {
			const currentDate = this.getDate({
			            format: true
			})
			return {
				tab:[
					{id:1,name:'预约活动'},
					{id:2,name:'预约信息'},
				],
				from:'',
				type:1,
				title: 'picker',
				array: ['中国', '美国', '巴西', '日本'],
				index: 0,
				date: currentDate,
				time: '12:01',
				info:{
				},
				signData:{
					true_name:'',
					mobile:'',
					desc:'',
				}
			}
		},
		onLoad(op) {
			this.from = op.from
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
		},
		created() {
			this.init()
		},
		methods: {
			tabClick(data) {
				console.log(data);
				this.type = data.id
			},
			 bindPickerChange: function(e) {
					console.log('picker发送选择改变，携带值为', e.target.value)
					this.index = e.target.value
				},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			async init() {
				var query = {
					"type": 'activity_join', // 全等于筛选，对应fieldEq
					"id": this.$route.query.id, // 第几页
				};
				 let res = await this.$api.communityData(query).then(res=> {
					 console.log("活动详情")
						console.log(res)
						if(res.code == 0){
							this.info = res.detail;
							this.user_info = res.user_info
							if(res.join_ing == 2){
								console.log('报名信息')
								this.signData = res.join
							}
						}
						this.loadShow = false;
				 }).catch(err=> { console.log(err) }
				 );
			},
			async submit() {
				var query = {
					"type": 'activity_join', // 全等于筛选，对应fieldEq
					"id": this.$route.query.id, // id
					"true_name":this.signData.true_name,
					"mobile":this.signData.mobile,
					"desc":this.signData.desc,
					"time_join":this.date,
					"submit":1
				};
				 let res = await this.$api.communityData(query).then(res=> {
					 console.log("活动详情")
						console.log(res)
						if(res.code == 0){
							uni.showModal({
								content:res.msg
							})
						}else{
							uni.showModal({
								content:res.msg
							})
						}
						this.loadShow = false;
				 }).catch(err=> { console.log(err) }
				 );
			}
		}
	}
</script>

<style lang="scss">
.page-flashSale {
	.bg-skill {
		width: 100%;
		height: 180rpx;
	}
	.text-tip {
		position: absolute;
	}
	.time-tag {
		font-size: 22rpx;
		padding: 0 4rpx;
		background-color: rgba(0,0,0,.4);
	}
}
.form-item .label{
		display: inline-block !important;
		color: #333333 !important;
		font-size: 18px;
		text-align: right !important;
	}
.form-item .input{
		display: inline-block;
		width: 60%;
		float: right;
	}
.pro-footer {
	padding: 50rpx;
	background-color: #fff;
	//position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 999;
	text-align: center;
	.btn {
		padding: 20rpx 40rpx;
		color: #fff;
		font-size: 26rpx;
		box-shadow: 0px 7rpx 22rpx -7rpx rgba(255,121,109,0.70); 
		border-radius: 7rpx;
		&.btn-add {
			background: linear-gradient(90deg, #282a32, #353535);
		}
		&.btn-buy{
			background: linear-gradient(90deg,#8663e8, #4f34cc);
		}
		&:first-child {
			margin-right: 20rpx;
		}
	}
	.icon-footer {
		flex:1;
		image {
			width: 50rpx;
			height: 50rpx;
			// flex:1;
		}
	}
}
.flash-sale-item {
	.pro-img {
		width: 160rpx;
		height: 160rpx;
		border-radius:10rpx;
		margin-right: 30rpx;
	}
	.product {
		flex:1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.btn-buy {
		position: absolute;
		right: 0;
		bottom: 0;
		color: #fff;
		background: linear-gradient(225deg,#ff9668, #ff5d72);
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 7rpx;
	}
}
</style>
